<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Windows Push Notifications - Legacy vs 2025</title>
    <style>
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 25px;
            line-height: 1.6;
            color: #333;
        }
        .question {
            background-color: #f8f9fa;
            padding: 25px;
            border-radius: 8px;
            margin-bottom: 25px;
        }
        .code-container {
            display: flex;
            gap: 20px;
            margin: 25px 0;
        }
        .code-block {
            flex: 1;
            background-color: #1e1e1e;
            color: #d4d4d4;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Cascadia Code', Consolas, monospace;
            font-size: 14px;
            line-height: 1.5;
            overflow-x: auto;
        }
        .legacy-code {
            border-left: 4px solid #a0a0a0;
        }
        .new-code {
            border-left: 4px solid #4CAF50;
        }
        .code-header {
            color: white;
            margin-top: 0;
            margin-bottom: 15px;
            font-weight: 600;
        }
        select {
            padding: 6px 10px;
            border-radius: 4px;
            min-width: 180px;
            background-color: #252526;
            color: #d4d4d4;
            border: 1px solid #3c3c3c;
            font-family: 'Cascadia Code', Consolas, monospace;
        }
        button {
            padding: 12px 24px;
            background-color: #0078d4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #106ebe;
        }
        #answer {
            display: none;
            margin-top: 25px;
            padding: 25px;
            background-color: #f3f2f1;
            border-radius: 8px;
        }
        .correct-answer {
            font-weight: 600;
            color: #107c10;
            font-size: 17px;
        }
        .explanation {
            margin-top: 20px;
        }
        .highlight {
            background-color: #264f78;
            padding: 2px 6px;
            border-radius: 4px;
            color: white;
            font-weight: 500;
        }
        .note {
            font-style: italic;
            color: #666;
            background-color: #fff8e1;
            padding: 8px 12px;
            border-radius: 4px;
            border-left: 3px solid #ffc107;
        }
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        .comparison-table th, .comparison-table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        .comparison-table th {
            background-color: #f2f2f2;
            font-weight: 600;
        }
        .comparison-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .method {
            color: #4ec9b0;
            font-weight: 500;
        }
        .namespace {
            color: #569cd6;
        }
        .parameter {
            color: #9cdcfe;
        }
        .string {
            color: #ce9178;
        }
        .update-badge {
            background-color: #4CAF50;
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            margin-left: 8px;
        }
    </style>
</head>
<body>
    <div class="question">
        <h1 style="color: #0078d4; margin-top: 0;">QUESTION NO: 142 HOTSPOT</h1>
        <p>You develop a news and blog content delivery app for Windows devices.</p>
        <p>A notification must arrive on a user's device when there is a new article available for them to view.</p>
        <p>You need to implement push notifications.</p>
        
        <div class="code-container">
            <div class="code-block legacy-code">
                <h3 class="code-header">Legacy Implementation (pre-2025)</h3>
<pre><span class="namespace">using</span> Microsoft.Azure.NotificationHubs;

<span class="namespace">string</span> notificationHubName = <span class="string">"contoso-hub"</span>;
<span class="namespace">string</span> notificationHubConnection = <span class="string">"Endpoint=sb://..."</span>;

<span class="comment">// Initialize client</span>
<span class="namespace">var</span> hub = <select id="dropdown1">
    <option value="">Select</option>
    <option value="NotificationHubClient">NotificationHubClient</option>
    <option value="NotificationHub">NotificationHub</option>
</select>.<select id="dropdown2">
    <option value="">Select</option>
    <option value="CreateClientFromConnectionString">CreateClientFromConnectionString</option>
    <option value="CreateFromConnectionString">CreateFromConnectionString</option>
</select>(notificationHubConnection, notificationHubName);

<span class="comment">// Notification payload</span>
<span class="namespace">string</span> windowsToastPayload = 
<span class="string">@"&lt;toast&gt;
    &lt;visual&gt;
        &lt;binding template=""ToastText01""&gt;
            &lt;text id=""1""&gt;New article available&lt;/text&gt;
        &lt;/binding&gt;
    &lt;/visual&gt;
&lt;/toast&gt;"</span>;

<span class="namespace">try</span>
{
    <span class="namespace">var</span> result = <span class="namespace">await</span> hub.<select id="dropdown3">
        <option value="">Select</option>
        <option value="SendWindowsNativeNotificationAsync">SendWindowsNativeNotificationAsync</option>
        <option value="SendNotificationAsync">SendNotificationAsync</option>
    </select>(windowsToastPayload);
}
<span class="namespace">catch</span> (System.Exception ex)
{
    <span class="comment">// Handle error</span>
}</pre>
            </div>

            <div class="code-block new-code">
                <h3 class="code-header">2025 Implementation <span class="update-badge">NEW</span></h3>
<pre><span class="namespace">using</span> Azure.NotificationHubs;
<span class="namespace">using</span> Azure.NotificationHubs.Models;

<span class="namespace">string</span> notificationHubName = <span class="string">"contoso-hub"</span>;
<span class="namespace">string</span> notificationHubConnection = <span class="string">"Endpoint=sb://..."</span>;

<span class="comment">// Initialize client with new SDK</span>
<span class="namespace">var</span> hub = <span class="method">NotificationHub</span>.<span class="method">CreateFromConnectionString</span>(
    notificationHubConnection, 
    notificationHubName,
    <span class="parameter">new</span> NotificationHubClientOptions {
        RetryOptions = <span class="parameter">new</span> Azure.Core.RetryOptions {
            MaxRetries = 3
        }
    });

<span class="comment">// Enhanced notification with actions</span>
<span class="namespace">var</span> notification = <span class="parameter">new</span> <span class="method">WindowsNotification</span>(
<span class="string">@"&lt;toast launch=""article=1234""&gt;
    &lt;visual&gt;
        &lt;binding template=""ToastGeneric""&gt;
            &lt;text&gt;New article available!&lt;/text&gt;
            &lt;text&gt;Click to view the latest content&lt;/text&gt;
            &lt;image src=""logo.png"" placement=""appLogoOverride""/&gt;
        &lt;/binding&gt;
    &lt;/visual&gt;
    &lt;actions&gt;
        &lt;action content=""View"" arguments=""action=view""/&gt;
        &lt;action content=""Dismiss"" arguments=""action=dismiss""/&gt;
    &lt;/actions&gt;
&lt;/toast&gt;"</span>);

<span class="namespace">try</span>
{
    <span class="comment">// Send with options</span>
    <span class="namespace">var</span> result = <span class="namespace">await</span> hub.<span class="method">SendNotificationAsync</span>(
        notification,
        <span class="parameter">new</span> NotificationOptions {
            Tags = <span class="parameter">new</span>[] { <span class="string">"news"</span>, <span class="string">"article"</span> },
            EnableTestSend = <span class="namespace">false</span>
        });
}
<span class="namespace">catch</span> (NotificationHubException ex)
{
    <span class="comment">// Enhanced error handling</span>
    Console.<span class="method">WriteLine</span>(<span class="string">$"Error {ex.Status}: {ex.Message}"</span>);
}</pre>
            </div>
        </div>

        <table class="comparison-table">
            <tr>
                <th>Component</th>
                <th>Legacy Version</th>
                <th>2025 Version</th>
                <th>Key Changes</th>
            </tr>
            <tr>
                <td>Namespace</td>
                <td><span class="namespace">Microsoft.Azure.NotificationHubs</span></td>
                <td><span class="namespace">Azure.NotificationHubs</span></td>
                <td>New unified Azure SDK namespace</td>
            </tr>
            <tr>
                <td>Client Initialization</td>
                <td><span class="method">NotificationHubClient.CreateClientFromConnectionString()</span></td>
                <td><span class="method">NotificationHub.CreateFromConnectionString()</span></td>
                <td>Simplified method name, supports client options</td>
            </tr>
            <tr>
                <td>Notification Creation</td>
                <td>Raw XML string</td>
                <td><span class="method">WindowsNotification</span> class</td>
                <td>Type-safe notification construction</td>
            </tr>
            <tr>
                <td>Sending Method</td>
                <td><span class="method">SendWindowsNativeNotificationAsync()</span></td>
                <td><span class="method">SendNotificationAsync()</span></td>
                <td>Unified method for all platforms</td>
            </tr>
            <tr>
                <td>Error Handling</td>
                <td>Generic Exception</td>
                <td><span class="method">NotificationHubException</span></td>
                <td>Specialized exception with status codes</td>
            </tr>
            <tr>
                <td>Additional Features</td>
                <td>Limited options</td>
                <td>NotificationOptions with tags, test send, etc.</td>
                <td>More control over notification delivery</td>
            </tr>
        </table>
    </div>
    
    <button onclick="showAnswer()">查看答案</button>
    
    <div id="answer">
        <h2 style="color: #0078d4;">正确答案:</h2>
        
        <h3>Legacy Version Answers:</h3>
        <p class="correct-answer">dropdown1: NotificationHubClient</p>
        <p class="correct-answer">dropdown2: CreateClientFromConnectionString</p>
        <p class="correct-answer">dropdown3: SendWindowsNativeNotificationAsync</p>
        
        <h3>2025 Version Answers:</h3>
        <p class="correct-answer">Client: NotificationHub</p>
        <p class="correct-answer">Method: CreateFromConnectionString</p>
        <p class="correct-answer">Send: SendNotificationAsync</p>
        
        <div class="explanation">
            <h3>迁移指南 (Legacy → 2025):</h3>
            <ol>
                <li><strong>更新NuGet包</strong>：从Microsoft.Azure.NotificationHubs迁移到Azure.NotificationHubs</li>
                <li><strong>修改命名空间</strong>：替换所有using语句</li>
                <li><strong>重构客户端初始化</strong>：使用新的NotificationHub类</li>
                <li><strong>升级通知格式</strong>：从字符串XML迁移到WindowsNotification类</li>
                <li><strong>更新发送方法</strong>：使用统一的SendNotificationAsync</li>
                <li><strong>增强错误处理</strong>：捕获NotificationHubException</li>
            </ol>
            
            <div class="note">
                <strong>注意：</strong> 2025 SDK仍然支持旧版API，但建议尽快迁移以获得新功能和性能改进。
            </div>
        </div>
    </div>
    
    <script>
        function showAnswer() {
            document.getElementById('answer').style.display = 'block';
            document.getElementById('dropdown1').value = 'NotificationHubClient';
            document.getElementById('dropdown2').value = 'CreateClientFromConnectionString';
            document.getElementById('dropdown3').value = 'SendWindowsNativeNotificationAsync';
        }
    </script>
</body>
</html>
